<template>
  <div class="flex h-full">
    <a-card class="flex-1 mx-1">
      <BaseTitle title="基本属性" />
      <div v-for="record in recodrData['基本属性']" :key="record.id">
        <a-checkbox
          :checked="record.status === 0 || ['姓名', '性别', '年龄'].includes(record.patientInfoName)"
          :disabled="['姓名', '性别', '年龄'].includes(record.patientInfoName)"
          class="my-2"
          @change="onChange($event, record)"
        >
          {{ record.patientInfoName }}
        </a-checkbox>
      </div>
    </a-card>
    <a-card class="flex-1 mx-1">
      <BaseTitle title="联系方式" />
      <div v-for="record in recodrData['联系方式']" :key="record.id">
        <a-checkbox :checked="record.status === 0" class="my-2" @change="onChange($event, record)">{{ record.patientInfoName }}</a-checkbox>
      </div>
    </a-card>
    <a-card class="flex-1 mx-1">
      <BaseTitle title="社会属性" />
      <div v-for="record in recodrData['社会属性']" :key="record.id">
        <a-checkbox :checked="record.status === 0" class="my-2" @change="onChange($event, record)">{{ record.patientInfoName }}</a-checkbox>
      </div>
    </a-card>
    <a-card class="flex-1 mx-1">
      <BaseTitle title="健康状况" />
      <div v-for="record in recodrData['健康状况']" :key="record.id">
        <a-checkbox :checked="record.status === 0" class="my-2" @change="onChange($event, record)">{{ record.patientInfoName }}</a-checkbox>
      </div>
    </a-card>
    <!-- <a-card class="flex-1 mx-1">
      <BaseTitle title="个人生活" />
      <div v-for="record in recodrData['个人生活']" :key="record.id">
        <a-checkbox :checked="record.status === 0" class="my-2" @change="onChange($event, record)">{{ record.patientInfoName }}</a-checkbox>
      </div>
    </a-card> -->
    <a-card class="flex-1 mx-1">
      <BaseTitle title="军用属性" />
      <div v-for="record in recodrData['军用属性']" :key="record.id">
        <a-checkbox :checked="record.status === 0" class="my-2" @change="onChange($event, record)">{{ record.patientInfoName }}</a-checkbox>
      </div>
    </a-card>
    <a-card class="flex-1 mx-1">
      <BaseTitle title="学校属性" />
      <div v-for="record in recodrData['学校属性']" :key="record.id">
        <a-checkbox :checked="record.status === 0" class="my-2" @change="onChange($event, record)">{{ record.patientInfoName }}</a-checkbox>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'

const recodrData = ref({})
const onChange = async (e, row) => {
  const { mes, code } = await post('/operation/opex/doSavePatientlnfoList', {
    id: row.id,
    status: e.target.checked ? 0 : 1
  })
  if (code !== 0) return message.error(mes)
  message.success('修改成功')
  getData()
}
const getData = async () => {
  const { data, mes, code } = await post('/operation/opex/getPatientlnfoList', {
    managementType: '0'
  })
  if (code !== 0) return message.error(mes || '获取数据失败')
  data.forEach((element) => {
    recodrData.value[element.patientInfoType] = element.children
  })
}
onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped></style>
